<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">今日网络流量 -- 共{{sumTraffic}}/MB</div> 
      <div class="sn-body"> 
        <div class="wrap-container"> 
          <div class="chartsdom" id="chart_networkTraffic"></div>
        </div> 
      </div> 
    </div>   
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: "networkTraffic",
  data() {
    return {
      timer: null,
      option: null,
      tableData: [],
      xAxisData: [],
      yData: [],
      sumTraffic: ''
    }
  },
  props: {
    time: {
      type: Number,
      default: 60000
    },
  },
  mounted() {
    this.getData();
    if(this.timer){
      clearInterval(this.timer)
    }else{
      this.timer=setInterval(()=>{
        this.getData()
      },this.time)
    }

  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getData() {
      const u = '/reception/bigScreen/querySiteTraffic';
      this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
      .then((res)=>{
        if(res.data.code == 200){
          this.tableData =  res.data.data.siteTraffic;
          this.sumTraffic =  res.data.data.sumTraffic;
          this.getEchart();
        }else{
          this.$message.error('暂无数据');
        };
      }).catch((err)=>{
          console.log(err);
      });
    },
    getEchart() {
      let myChart = echarts.init(document.getElementById('chart_networkTraffic'));
      let barWidth = '8';
      let dataCoord = [];
      let xAxisData = [], yData = [];
      for(let i=0;i<this.tableData.length;i++){
        let obj1 = {};
        obj1.coord = [i, this.tableData[i].value];
        dataCoord.push(obj1);
        xAxisData.push(this.tableData[i].name);
        yData.push(this.tableData[i].value);
      }
      this.xAxisData = xAxisData;
      this.yData = yData;
      let showed = this.tableData && this.tableData.length ? false : true;
      this.option = {
        title: {
          show: showed, // 是否显示title
          text: '暂无数据',
          left: 'center',
          top: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 400
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          data: this.xAxisData,
          axisLabel: {
            color: '#999',
          },
          axisTick: {
            show: false
          }, 
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(78, 241, 246, 0.3)',
            }
          },
        },
        yAxis: {
          axisLabel: {
            color: '#999'
          },
          axisTick: {
            show: false
          }, 
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(78, 241, 246, 0.3)'
            }
          },
        },
        grid: {
          top: 20,
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        series: [
          {
            name: '网络流量',
            type: 'bar',
            stack: 'one',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 1, 
                  color: 'rgba(0, 0, 0, 0)'
                },{
                  offset: 0.5, 
                  color: 'rgba(69, 194, 198,0.3)'
                },{
                  offset: 0, 
                  color: 'rgb(78, 241, 246)'
                }])
              }
            },
            barWidth: barWidth,
            markPoint: {
              symbol: 'circle',
              itemStyle: {
                normal: {
                  color: 'rgb(78, 241, 246)',
                  shadowColor: 'rgb(78, 241, 246)',
                  shadowBlur: 20
                }
              },
              symbolSize: [10, 10], // 容器大小
              symbolOffset: [0, 0], // 位置偏移
              data: dataCoord,
            },
            label: {
              show: true,
              position: 'top',
              color: 'rgb(78, 241, 246)'
            },
            data: this.yData
          }
        ]
      };
      myChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  },
  beforeDestroy() {
    
  }
};
</script>

<style lang="less" scoped>
.sn-container {
  .chartsdom {
    width: 100%;
    height: 95%;
  }
}
</style>
